<template>
  <div class="container">
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field v-model="loginForm.userAccount" name="userAccount" label="账号" placeholder="账号"
          :rules="[{ required: true, message: '请填写账号' }]" />
        <van-field v-model="loginForm.userPassword" type="password" name="userPassword" label="密码" placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]" />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit"> 提交 </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { userlogin } from '@/api/user/user'
import router from '@/router'
import { useUserStore } from '@/stores/user'
import { showFailToast, showSuccessToast } from 'vant'
import { reactive } from 'vue'

const userStore = useUserStore()
const loginForm = reactive({
  userAccount: '',
  userPassword: '',
})

const onSubmit = () => {
  userlogin(loginForm).then((res) => {
    const { code, data } = res
    userStore.setCurrentUser(data)
    if (code === 200) {
      showSuccessToast('登录成功')
      console.log("登录成功");

      router.replace({
        path: '/',
      })
    } else {
      showFailToast('登录失败')
    }
  })
}
</script>

<style scoped>
.container {
  /* height: 100%;
  width: 100%; */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
@/stores/user
